<template>
  <el-select
    v-model="currentValue"
    @input="$emit('input', $event)"
    :multiple="multiple"
    :filterable="filterable"
    :placeholder="placeholder"
    :loading="loading"
    @change="onChange">
    <el-option :label="item.label" :value="item.value" v-for="(item, index) in options" :key="index"></el-option>
  </el-select>
</template>

<script>
import {get, post } from '../../utils/request.js'
export default {
  name: 'TsRequestSelect',
  props: {
    value: {
      required: true
    },
    requestApi: {
      type: String,
      default: ''
    },
    requestType: {
      type: String,
      default: 'get'
    },
    requestKey: {
      type: String,
      default: ''
    },
    requestParams: {
      type: Object,
      default: () => ({})
    },
    multiple: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    label: {
      type: String,
      default: 'label'
    },
    field: {
      type: String,
      default: 'value'
    },
    filterable: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      options: [],
      currentValue: this.value
    }
  },
  computed: {
  },
  watch: {
    value: {
      handler(val) {
        if (val !== this.currentValue) {
          if (this.multiple) {
            // console.log('val',val)
            // console.log('currentValue',this.currentValue)
            // console.log('Object.prototype.toString.call(val)',Object.prototype.toString.call(val))
            if (Object.prototype.toString.call(val) === '[object String]') {
              try {
                this.currentValue = JSON.parse(val)
              } catch (e) {
                console.log(e)
                this.currentValue = val.split(',')
              }
            }
            if (Object.prototype.toString.call(val) === '[object Array]') {
              this.currentValue = val
            }
          } else {
            this.currentValue = val
          }
        }
      },
      immediate: true,
      deep: true
    },
  },
  created() {
    this.loading = true
    this.getData()
  },
  methods: {
    onChange(){
      this.$emit('input', this.currentValue)
      this.$emit('change', this.currentValue)
    },
    getData(query) {
      if (this.requestType === 'GET' || this.requestType === 'get') {
        get(this.requestApi, this.requestParams).then(data => {
          if (data) {
            this.options = data.map(item => ({ label: item[this.label], value: item[this.field] }))
          } else {
            this.options = []
          }
          this.loading = false
        })
      } else {
        post(this.requestApi, this.requestParams).then(data => {
          if (data) {
            this.options = data.map(item => ({ label: item[this.label], value: item[this.field] }))
          } else {
            this.options = []
          }
          this.loading = false
        })
      }
    }
  }
}
</script>
